<template>
    <view class="content">
        <view class="top">
			<view class="info" @click="toLogin">
				<image :src="info.image_uri || '../../static/icon/avatar.png'" class="avatar"></image>
				<view class="u-flex-1">
					<view class="name">{{info.nickname || '用户名'}}</view>
					<view class="card" v-if="info.referral_code">ID {{ info.referral_code }}</view>
				</view>
				<view class="btn" @click.stop="toPage(`/mine/pages/info/info`)">个人信息</view>
			</view>
			<!-- 分销中心 -->
			<image src="../../static/image/u_1.png" class="u-1" @click="toPage(`/mine/pages/share/share`)"></image>
			
			<view class="box-o">
			    <view class="my-o">订单管理</view>
			    <view class="ord-box">
			    	<view class="wid" @click="toPage(`/mine/pages/order/order?type=${1}`)">
			    		<image src="../../static/icon/us_1.png" mode=""></image>
			            <view class="ord-num" :class="{'ord-num2' : count > 9 }" v-if="count > 0">
			                {{count > 99 ? '99+' : count}}
			            </view>
			    		<view class="ord-t">待支付</view>
			    	</view>
			    	<view class="wid" @click="toPage(`/mine/pages/order/order?type=${1}`)">
			    		<image src="../../static/icon/us_2.png" mode=""></image>
			            <view class="ord-num" :class="{'ord-num2' : count.status_two > 9 }" v-if="count.status_two > 0">
			                {{count.status_two > 99 ? '99+' : count.status_two}}
			            </view>
			    		<view class="ord-t">待发货</view>
			    	</view>
			    	<view class="wid" @click="toPage(`/mine/pages/order/order?type=${1}`)">
			    		<image src="../../static/icon/us_3.png" mode=""></image>
			            <view class="ord-num" :class="{'ord-num2' : count.status_three > 9 }" v-if="count.status_three > 0">
			                {{count.status_three > 99 ? '99+' : count.status_three}}
			            </view>
			    		<view class="ord-t">待收货</view>
			    	</view>
			    	<view class="wid" @click="toPage(`/mine/pages/order/order?type=${1}`)">
			    		<image src="../../static/icon/us_4.png" mode=""></image>
			    		<view class="ord-t">已完成</view>
			    	</view>
			        <view class="wid" @click="toPage(`/mine/pages/order/order?type=${1}`)">
			        	<image src="../../static/icon/us_5.png" mode=""></image>
			        	<view class="ord-t">售后</view>
			        </view>
					<view class="wid" @click="toPage(`/mine/pages/order/order?type=${0}`)">
						<image src="../../static/icon/us_6.png" mode=""></image>
						<view class="ord-t">全部订单</view>
					</view>
			    </view>
			</view>
		</view>
		
		<view class="down">
			<!-- 任务系统 -->
			<image src="../../static/image/u_2.png" class="u-2" @click="toPage(`/mine/pages/task/task`)"></image>
			<!-- 领券中心 -->
			<image src="../../static/image/u_3.png" class="u-2" @click="toPage(`/mine/pages/coupon/coupon`)"></image>
			<!-- 收获地址 -->
			<image src="../../static/image/u_4.png" class="u-2" @click="toPage(`/mine/pages/address/address`)"></image>
			<!-- 帮助中心 -->
			<image src="../../static/image/u_5.png" class="u-2" @click="toPage(`/mine/pages/help/help`)"></image>
		</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                count: 9,
				info: {},
            };
        },
        onLoad() {
            
        },
		onShow() {
			if (this.$getSync('userToken')) {
				this.getInfo()
			}
		},
        methods: {
            toPage(url) {
				if (!uni.getStorageSync('userToken')) {
				    uni.navigateTo({
				        url: '../login/login'
				    });
				} else {
					this.$gTo(url)
				}
			},
			
			toLogin() {
				if (!uni.getStorageSync('userToken')) {
				    uni.navigateTo({
				        url: '../login/login'
				    });
				}
			},
			
			getInfo() {
				this.$ajax('members/members', {
					userToken: this.$getSync('userToken'),
				}).then(ret => {
					if (ret.status == 0) {
			            this.info = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
        }
    };
</script>

<style lang="scss">
	
	
    page{
        background: #fff;
    }
	.top{
		background: linear-gradient(to bottom, #e5eff7,#a8d9f7);
		padding: 0 25rpx 50rpx;
	}
	.info{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0 45rpx;
	}
	.avatar{
		width: 110rpx;
		height: 110rpx;
		border: 2rpx solid #fff;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	.name{
		font-size: 38rpx;
		word-break: break-all;
		white-space: pre-line;
		padding-bottom: 10rpx;
	}
	.card{
		font-size: 26rpx;
		color: #6d6c6c;
	}
	.btn{
		font-size: 26rpx;
		color: #1f3b67;
		padding: 12rpx 26rpx;
		background-color: #c4dbed;
		border-radius: 50rpx;
		margin-left: 20rpx;
	}
	.u-1{
		width: 700rpx;
		height: 102rpx;
		margin-bottom: 20rpx;
	}
	
	
	.box-o{
		background-color: #fff;
		border-radius: 20rpx;
	    margin-bottom: 20rpx;
		padding: 30rpx 25rpx 40rpx;
	}
	.my-o{
	    font-size: 30rpx;
	    font-weight: bold;
		padding-bottom: 30rpx;
	}
	.ord-box {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	}
	.wid {
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    position: relative;
	    
		image {
			width: 46rpx;
			height: 46rpx;
			margin-bottom: 10rpx;
		}
	    
	    .ord-num{
	        font-size: 22rpx;
	        line-height: 1;
	        color: #fff;
	        padding: 5rpx 8rpx;
	        background-color: #fa3c07;
	        border-radius: 50%;
	        position: absolute;
	        right: -10rpx;
	        top: -10rpx;
	    }
	    .ord-num2{
	        font-size: 22rpx;
	        line-height: 1;
	        color: #fff;
	        padding: 6rpx 4.5rpx;
	        background-color: #fa3c07;
	        border-radius: 50%;
	        position: absolute;
	        right: -10rpx;
	        top: -10rpx;
	    }
		.ord-t {
			font-size: 25rpx;
		}
	}
	
	.down{
		background-color: #fff;
		padding: 37rpx 25rpx 0;
		border-radius: 30rpx 30rpx 0 0;
		margin-top: -40rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}
	.u-2{
		width: 340rpx;
		height: 145rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}
	.u-2:nth-child(2n){
		margin-right: 0;
	}

</style>
